<template>
  <div class="tableData">
    <div class="tableDataMessage" ref="table">
      <el-table
        :data="TableDataMessage.list"
        stripe
        :header-cell-style="tableHeaderColor"
        :cell-style="rowClass"
        max-height="420"
      >
        <el-table-column prop="dataMart" label="应用系统" width="80px">
        </el-table-column>
        <el-table-column prop="dataType" label="服务类型"> </el-table-column>
        <el-table-column prop="dataName" label="服务名称"> </el-table-column>
        <el-table-column prop="day" label="调用次数"> </el-table-column>
        <el-table-column prop="succeed" label="成功次数"> </el-table-column>
        <el-table-column prop="fail" label="失败次数"> </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        layout="total,prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="TableDataMessage.pageSize"
        :total="TableDataMessage.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "tableDataMessage",
  props: {
    TableDataMessage: {
      type: Object,
    },
  },
  data() {
    return {};
  },

  methods: {
    //设置表头行的样式
    tableHeaderColor() {
      return "background-color:transparent;color:#1682e6;text-align:center";
    },
    rowClass() {
      //表格数据居中显示
      return "text-align:center";
    },
    handleCurrentChange(val) {
      this.$emit("message", val);
    },
  },
};
</script>

<style  lang="scss" scoped>
.tableData {
  // flex: 1;
  align-self: flex-start;

  .tableDataMessage {
    height: 100%;
    .el-table {
      position: absolute;
      top: 0;
      width: 100%;
    }
  }
}
.block {
  position: absolute;
  bottom: 0;
  width: 100%;
}
</style>